Doto Windows Azure Mobile Services sample


Windows Runtime
azure mobile services
Windows RT
en-US
11/25/2013
View this sample online

The doto sample is a simple, social to-do list application that demonstrates how easy it is to add the power of Windows Azure Mobile Services to your Windows Store game.

This doto sample is an updated version of the sample for Windows 8 . Both versions use the Windows Azure Mobile Services in the same way.

You can read more about the technology in the doto sample here.

Doto uses the following features from Mobile Services:

  • Authentication using Microsoft account.
  • Structured storage with server scripts to provide validation and authorization.
  • Integration with Windows Notification Services to send Live Tile updates and toast notifications.

The Doto sample is a Windows Store game that allows you to:

  • create multiple lists.
  • add and delete items from your lists.
  • share your lists with other users.
  • add and delete items from shared lists.

Related topics

free Windows Azure trial
Windows Azure management portal
Windows 8 app samples

Operating system requirements

Client
Windows 8.1
Server
Windows Server 2012 R2

Build the sample

To use the sample:

  1. If you do not have an Windows Azure subscription already, then sign up for a free trial . This will enable you to host 10 mobile services for free.
  2. Install the command line tools for Windows Azure.
  3. Download the credentials needed to talk to Windows Azure. You need to do this once to manage all subsequent commands to Mobile Services.

    To do this:

    • Download the Windows Azure management credentials by entering the command azure account download. This will open up a web page to login to the Management Portal for Windows Azure. Once you log in, it will generate and prompt you to download a publishsettings file for your Windows Azure subscription. Save this file to a location on your machine.

    • Import the publishsettings file from the saved location. This will configure your command line client to manage all your Windows Azure services from the command line. To do this, enter the command:

      azure account import [SaveLocation]

  4. Create a Windows Azure Mobile Service by entering the command:

    azure mobile create [AzureMobileServiceName] [sqlAdminUsername] [sqlAdminPassword]

  5. Setup the tables and set the permissions for the table operations for your Windows Azure Mobile Service by entering the following commands:

    azure mobile table create [AzureMobileServiceName] devices --permissions insert=user,update=admin,delete=admin,read=admin
    azure mobile table create [AzureMobileServiceName] invites --permissions insert=user,update=user,delete=admin,read=user
    azure mobile table create [AzureMobileServiceName] items --permissions insert=user,update=admin,delete=user,read=user
    azure mobile table create [AzureMobileServiceName] listMembers --permissions insert=user,update=admin,delete=user,read=user
    azure mobile table create [AzureMobileServiceName] profiles --permissions insert=user,update=admin,delete=admin,read=user
    azure mobile table create [AzureMobileServiceName] settings --permissions insert=admin,update=admin,delete=admin,read=application

  6. Upload the scripts to your Windows Azure Mobile Service which will set up the database. In the command line, change to the Scripts directory the under sample installation location. Run the following commands to upload this scripts:

    azure mobile script upload [AzureMobileServiceName] table/devices.insert.js
    azure mobile script upload [AzureMobileServiceName] table/invites.insert.js
    azure mobile script upload [AzureMobileServiceName] table/invites.read.js
    azure mobile script upload [AzureMobileServiceName] table/invites.update.js
    azure mobile script upload [AzureMobileServiceName] table/items.delete.js
    azure mobile script upload [AzureMobileServiceName] table/items.insert.js
    azure mobile script upload [AzureMobileServiceName] table/items.read.js
    azure mobile script upload [AzureMobileServiceName] table/listMembers.insert.js
    azure mobile script upload [AzureMobileServiceName] table/listmembers.delete.js
    azure mobile script upload [AzureMobileServiceName] table/listMembers.read.js
    azure mobile script upload [AzureMobileServiceName] table/profiles.insert.js
  7. Register your app to receive push notifications.
  8. In Microsoft Visual Studio, open the sample solution and right click the doto project and then select Store -> Associate App with the Store from the context menu. Complete the wizard by logging in and then select the app you previously registered in the store.

  9. Collect information from the Live Connect Developer Center.

    • Go to the Live Connect Developer Center and select your app in the My Applications list.
    • Once in your app, click Edit Settings.
    • Under API Settings, make a note of the Client ID, Client secret and the Package security identifier (SID) values.
    • Set the Redirect Domain to be the URI of your mobile service.

  10. Configure your Windows Azure Mobile Service with the Client secret and Package security identifier values obtained in the previous step:

    azure mobile config set [AzureMobileServiceName] microsoftAccountClientId [ClientId]
    azure mobile config set [AzureMobileServiceName] microsoftAccountClientSecret [ClientSecret]
    azure mobile config set [AzureMobileServiceName] microsoftAccountPackageSID [PackageSID]

  11. Get the ApplicationUrl and ApplicationKey for your Windows Azure Mobile Service:

    azure mobile show [AzureMobileServiceName]

  12. Update sample code so that the sample can talk to Mobile Services.

    • Install the Windows Azure Mobile Services NuGet package.
    • Open up the App.xaml.cs file.
    • Replace the mobile-service-url and mobile-service-key with the ApplicationUrl and ApplicationKey retrieved in the previous step. Now your Windows store app is all set to talk to your newly created Mobile Services.

  13. This step is optional. Doto uses the settings table to implement a simple updatable theming system. This allows the app developer to change the look of doto for all users. You can point to any background image you like and set any accent color. To set your own theme, you can connect to your SQL database which is backing up your Windows Azure Mobile Service and insert/update the settings with a SQL script. This exercise demonstrates how you can perform operations directly on the SQL Azure database, including adding new columns and running scripts:

    • In the Management Portal for Windows Azure, click on the database icon on the left.
    • Find the database that your Mobile Service is connected to by looking at your Mobile Service's dashboard in the portal. Choose the database then choose the Manage command on the dashboard.
    • This should open the SQL Database in the browser management experience. You may be prompted to open the appropriate IP addresses to allow your browser to connect.
    • Login using the administrator account for your SQL Server and choose New Query.

    • Run the following T-SQL script to manually create some columns and insert some new settings. Note that the schema name doto used below should be replaced with the name of your application.

      • ALTER TABLE doto.settings
      • ADD [key] nvarchar(50), [value] nvarchar(255)
      • GO
      • INSERT INTO doto.settings VALUES ('accentColor', '#769334'), ('backgroundImage', 'http://[someUrl]/dotoBackground.png');
      • Notice that when you start the doto app a different picture loads after startup based on the URL below.

Run the sample

  1. To debug the app and then run it, press F5 or use Debug > Start Debugging. To run the app without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.
  2. When first starting doto, you'll be asked to register. Adding your location details makes it easier to search for someone to search for you when they want to share a list.
  3. Once registered, you will be asked to create a new list. Choose the Create a new list button, enter a name for your list and select Save.
  4. You can add more lists at any time by using the bottom app bar. You can right click the screen to view the app bar.
  5. You can also use the bottom app bar to add, remove items, refresh the current list and invite other users or leave a list.
  6. You can switch between multiple lists by choosing the name of your list from the top left of the screen which will show a dropdown of all available lists.
  7. Doto was designed to be extremely simple. Items can be removed from a list but there is no way to edit an item or mark it complete. To remove items from the list, just select them and click remove item in the app bar.
  8. You can invite other users to share a list by clicking on the invite user button and searching for people by name. To test this feature, you may need to sign out, by using the settings charm, and then sign in again with a second Microsoft account account.
  9. When a user is invited to share a list, they will receive a toast notification. Users can then click the view invite button in the app bar to accept or reject an invite. Note that an invited user gets full permissions over your list, including the ability to invite other users.
  10. You can also go to the Management Portal for Windows Azure, login and view your Mobile service and the saved data.